<template>
  <t-card>
    <dynamic-form v-model="formData" :form-items="formItems" />

    <p style="margin-top: 50px">{{ formData }}</p>
  </t-card>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';

import { DynamicForm, FormRowType } from './index';

const formData = ref({
  name: 'test',
  age: 18,
  major: '1.1',
  checkbox: ['1'],
  radio: '1',
  DateRangePicker: [],
  tagInput: [],
  RangeInput: ['', ''],
  remark: '备注',
  select: [],
  Switch: false,
  files: [],
  Slider: 50,
  upload: [],
  TimePicker: '',
  TimeRangePicker: [],
  data: '',
  icon: '',
});

const formItems = computed<FormRowType[]>(() => [
  {
    rowAttribute: {},
    children: [
      {
        name: 'name',
        component: 'Input',
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '姓名',
        },
      },
      {
        name: 'name',
        component: 'AutoComplete',
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '姓名',
        },
      },
    ],
  },
  {
    children: [
      {
        name: 'age',
        component: 'InputNumber',
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '年龄',
        },
      },
      {
        name: 'major',
        component: 'Cascader',
        componentAttribute: {
          options: [
            {
              label: '选项一',
              value: '1',
              children: [
                {
                  label: '子选项一',
                  value: '1.1',
                },
                {
                  label: '子选项二',
                  value: '1.2',
                },
                {
                  label: '子选项三',
                  value: '1.3',
                },
              ],
            },
            {
              label: '选项二',
              value: '2',
              children: [
                {
                  label: '子选项一',
                  value: '2.1',
                },
                {
                  label: '子选项二',
                  value: '2.2',
                },
              ],
            },
          ],
        },
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '专业',
        },
      },
    ],
  },
  {
    children: [
      {
        name: 'checkbox',
        component: 'CheckboxGroup',
        componentAttribute: {
          options: [
            {
              label: '选项一',
              value: '1',
            },
            {
              label: '选项二',
              value: '2',
            },
          ],
        },
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '复选框',
        },
      },
      {
        name: 'radio',
        component: 'RadioGroup',
        componentAttribute: {
          options: [
            {
              label: '选项一',
              value: '1',
            },
            {
              label: '选项二',
              value: '2',
            },
          ],
        },
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '单选框',
        },
      },
    ],
  },
  {
    children: [
      {
        name: 'remark',
        component: 'Textarea',
        colAttribute: {
          span: 12,
        },
        formItemAttribute: {
          label: '备注',
        },
      },
    ],
  },
  {
    children: [
      {
        name: 'data',
        component: 'DatePicker',
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '日期',
        },
      },
      {
        name: 'DateRangePicker',
        component: 'DateRangePicker',
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '日期区间',
        },
      },
    ],
  },
  {
    children: [
      {
        name: 'tagInput',
        component: 'TagInput',
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '标签输入框',
        },
      },
      {
        name: 'RangeInput',
        component: 'RangeInput',
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: 'RangeInput',
        },
      },
    ],
  },
  {
    children: [
      {
        name: 'select',
        component: 'Select',
        componentAttribute: {
          options: [
            {
              label: '选项一',
              value: '1',
            },
            {
              label: '选项二',
              value: '2',
            },
          ],
          multiple: true,
        },

        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '下拉框',
        },
      },
      {
        name: 'Slider',
        component: 'Slider',
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '滑块',
        },
      },
    ],
  },
  {
    children: [
      {
        name: 'upload',
        component: 'Upload',
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '上传',
        },
      },
      {
        name: 'Switch',
        component: 'Switch',
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: '开关',
        },
      },
    ],
  },
  {
    children: [
      {
        name: 'TimePicker',
        component: 'TimePicker',
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: 'TimePicker',
        },
      },
      {
        name: 'TimeRangePicker',
        component: 'TimeRangePicker',
        colAttribute: {
          span: 6,
        },
        formItemAttribute: {
          label: 'TimeRangePicker',
        },
      },
    ],
  },
  {
    children: [
      {
        name: 'files',
        component: 'Upload',
        componentAttribute: {},
        formItemAttribute: {
          label: '文件上传',
        },
      },
    ],
  },
  {
    children: [
      {
        name: 'icon',
        component: 'IconSelect',
        colAttribute: {
          span: 12,
        },
        formItemAttribute: {
          label: '图标选择',
        },
      },
    ],
  },
]);
</script>

<style lang="less" scoped></style>
